<template>
  <Page>
    <!--数据卡片-->
    <el-row :gutter="12" class="pt-0">
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="custom-box-card">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-base">访问量</span>
              <el-tag class="ml-2" type="success">日</el-tag>
            </div>
          </template>
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default>
              <div class="flex justify-between px-1 py-1">
                <CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-3xl" />
              </div>
              <div class="flex justify-between px-1 py-1">
                <div class="text-sm">
                  日同比
                  <CountTo :startVal="1" suffix="%" :endVal="info.visits.rise" />
                  <el-icon :color="`var(--el-color-success)`" size="14"
                    ><ArrowUpOutlined
                  /></el-icon>
                </div>
                <div class="text-sm">
                  周同比
                  <CountTo :startVal="1" suffix="%" :endVal="info.visits.decline" />
                  <el-icon :color="`var(--el-color-success)`" size="14"
                    ><ArrowUpOutlined
                  /></el-icon>
                </div>
              </div>
              <el-divider style="margin: 16px 0 10px 0" />
              <div class="flex justify-between py-1">
                <div class="text-sm"> 总访问量：</div>
                <div class="text-sm">
                  <CountTo :startVal="1" :endVal="info.visits.amount" />
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="custom-box-card">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-base">销售额</span>
              <el-tag class="ml-2">周</el-tag>
            </div>
          </template>
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default>
              <div class="flex justify-between px-1 py-2">
                <CountTo
                  prefix="￥"
                  :startVal="1"
                  :endVal="info.saleroom.weekSaleroom"
                  class="text-3xl"
                />
              </div>
              <div class="flex justify-between px-2 py-1">
                <div class="flex-1 text-sm">
                  <el-progress :percentage="70" />
                </div>
              </div>
              <el-divider style="margin: 16px 0 10px 0" />
              <div class="flex justify-between py-1">
                <div class="text-sm"> 总销售额：</div>
                <div class="text-sm">
                  <CountTo prefix="￥" :startVal="1" :endVal="info.saleroom.amount" />
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="custom-box-card">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-base">订单量</span>
              <el-tag class="ml-2" type="warning">周</el-tag>
            </div>
          </template>
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default>
              <div class="flex justify-between px-1 py-1">
                <CountTo :startVal="1" :endVal="info.orderLarge.weekLarge" class="text-3xl" />
              </div>
              <div class="flex justify-between px-1 py-1">
                <div class="text-sn">
                  日同比
                  <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.rise" />
                  <el-icon :color="`var(--el-color-danger)`" size="14"
                    ><ArrowDownOutlined
                  /></el-icon>
                </div>
                <div class="text-sn">
                  周同比
                  <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.decline" />
                  <el-icon :color="`var(--el-color-danger)`" size="14"
                    ><ArrowDownOutlined
                  /></el-icon>
                </div>
              </div>
              <el-divider style="margin: 16px 0 10px 0" />
              <div class="flex justify-between py-1">
                <div class="text-sm"> 转化率：</div>
                <div class="text-sm">
                  <CountTo :startVal="1" suffix="%" :endVal="info.orderLarge.amount" />
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="custom-box-card">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-base">成交额</span>
              <el-tag class="ml-2" type="danger">月</el-tag>
            </div>
          </template>
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default>
              <div class="flex justify-between px-1 py-1">
                <CountTo
                  prefix="￥"
                  :startVal="1"
                  :endVal="info.volume.weekLarge"
                  class="text-3xl"
                />
              </div>
              <div class="flex justify-between px-1 py-1">
                <div class="text-sn">
                  日同比
                  <CountTo :startVal="1" suffix="%" :endVal="info.volume.rise" />
                  <el-icon :color="`var(--el-color-success)`" size="14"
                    ><ArrowUpOutlined
                  /></el-icon>
                </div>
                <div class="text-sn">
                  月同比
                  <CountTo :startVal="1" suffix="%" :endVal="info.volume.decline" />
                  <el-icon :color="`var(--el-color-danger)`" size="14"
                    ><ArrowDownOutlined
                  /></el-icon>
                </div>
              </div>
              <el-divider style="margin: 16px 0 10px 0" />
              <div class="flex justify-between py-1">
                <div class="text-sm"> 总成交额：</div>
                <div class="text-sm">
                  <CountTo prefix="￥" :startVal="1" :endVal="info.volume.amount" />
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>

    <!--导航卡片-->
    <el-row :gutter="12">
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="3"
        v-for="(item, index) in iconList"
        :key="index"
      >
        <el-card shadow="hover" class="custom-box-card">
          <el-skeleton :rows="3" :loading="loading" style="width: 100%">
            <template #default>
              <div class="py-2 cursor-pointer">
                <p class="flex justify-center">
                  <i :style="{ width: '32px', color: item.color, fontSize: `${item.size}px` }">
                    <component
                      :is="item.icon"
                      :style="{ color: item.color, fontSize: `${item.size}px` }"
                      v-on="item.eventObject || {}"
                    />
                  </i>
                </p>
                <p class="flex justify-center mb-0"
                  ><span>{{ item.title }}</span></p
                >
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待办任务和收入来源 -->
    <el-row :gutter="12">
      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <el-card shadow="hover" class="custom-box-card">
          <template #header>
            <div class="flex items-center justify-between card-header">
              <div class="flex items-center">
                <el-icon :size="20" :color="`var(--el-color-warning)`">
                  <FileDoneOutlined /> </el-icon
                ><div class="ml-1 text-base">待办任务</div>
              </div>
              <el-link href="#" target="_blank" type="primary">更多</el-link>
            </div>
          </template>
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default
              ><el-table :data="toDoTasks" style="width: 100%">
                <el-table-column prop="task" label="任务说明" width="250" />
                <el-table-column prop="modular" label="模块" align="center" />
                <el-table-column prop="collaborators" label="协作者" header-align="center">
                  <template #default="scope">
                    <div class="flex items-center justify-center">
                      <div v-for="val in scope.row.collaborators" :key="val">
                        <el-avatar :size="20" :src="val.avatar" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="tester" label="测试者" header-align="center">
                  <template #default="scope">
                    <div class="flex items-center justify-center">
                      <div v-for="val in scope.row.tester" :key="val">
                        <el-avatar :size="20" :src="val.avatar" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="isComplete" label="完成度" align="center">
                  <template #default="scope">
                    <el-tag :type="scope.row.isComplete ? 'success' : 'danger'">{{
                      scope.row.isMember ? '是' : '否'
                    }}</el-tag>
                  </template>
                </el-table-column>
              </el-table></template
            >
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-card shadow="hover" class="custom-box-card">
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default><Pie /></template>
          </el-skeleton>
          <el-table :data="revenue" style="width: 100%">
            <el-table-column prop="source" label="来源" />
            <el-table-column prop="value" label="收入" sortable align="right" width="80" />
            <el-table-column prop="address" label="占比" :formatter="formatter" align="right" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!--访问量 | 流量趋势-->
    <el-row :gutter="12" class="mb-3">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="hover" class="custom-box-card">
          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
            <template #default><VisiTab /></template>
          </el-skeleton>
        </el-card>
      </el-col>
    </el-row>
  </Page>
</template>
<script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue';
  import Pie from '../console/components/Pie.vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import VisiTab from '../console/components/VisiTab.vue';
  import { CountTo } from '@/components/CountTo/index';
  import {
    UsergroupAddOutlined,
    BarChartOutlined,
    ShoppingCartOutlined,
    AccountBookOutlined,
    CreditCardOutlined,
    MailOutlined,
    TagsOutlined,
    SettingOutlined,
    FileDoneOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined,
  } from '@vicons/antd';
  import { avatarEnum } from '@/enums/avatarEnum';
  import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';

  const loading = ref(true);
  const info = reactive<any>({
    saleroom: {},
    orderLarge: {},
    visits: {},
    volume: {},
  });

  // 图标列表
  const iconList = [
    {
      icon: UsergroupAddOutlined,
      size: '32',
      label: '用户',
      color: '#69c0ff',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: BarChartOutlined,
      size: '32',
      label: '分析',
      color: '#69c0ff',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: ShoppingCartOutlined,
      size: '32',
      label: '商品',
      color: '#ff9c6e',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: AccountBookOutlined,
      size: '32',
      label: '订单',
      color: '#b37feb',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: CreditCardOutlined,
      size: '32',
      label: '票据',
      color: '#ffd666',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: MailOutlined,
      size: '32',
      label: '消息',
      color: '#5cdbd3',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: TagsOutlined,
      size: '32',
      label: '标签',
      color: '#ff85c0',
      eventObject: {
        click: () => {},
      },
    },
    {
      icon: SettingOutlined,
      size: '32',
      label: '配置',
      color: '#ffc069',
      eventObject: {
        click: () => {},
      },
    },
  ];

  onMounted(async () => {
    const res = await getConsoleInfo();
    info.saleroom = res.saleroom;
    info.orderLarge = res.orderLarge;
    info.visits = res.visits;
    info.volume = res.volume;
    loading.value = false;
  });

  //待办任务
  const toDoTasks = [
    {
      id: 1,
      task: '支付页面增加飞贷分期的选择',
      modular: '支付',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 3,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg4,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      isComplete: true,
    },
    {
      id: 2,
      task: '新增banner轮播图广告',
      modular: '广告',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg6,
        },
      ],
      isComplete: false,
    },
    {
      id: 3,
      task: '开发微信小程序',
      modular: '营销',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
      ],
      isComplete: false,
    },
    {
      id: 4,
      task: '支付页面增加支付宝支付',
      modular: '支付',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 3,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg4,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      isComplete: true,
    },
    {
      id: 5,
      task: '新增弹出框广告增强效果',
      modular: '广告',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg2,
        },
        {
          id: 2,
          avatar: avatarEnum.avatarImg3,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg6,
        },
      ],
      isComplete: false,
    },
    {
      id: 6,
      task: '新增微信支付',
      modular: '支付',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg5,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg1,
        },
      ],
      isComplete: false,
    },
    {
      id: 7,
      task: '新增百度商桥',
      modular: '营销',
      collaborators: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg6,
        },
      ],
      tester: [
        {
          id: 1,
          avatar: avatarEnum.avatarImg2,
        },
      ],
      isComplete: false,
    },
  ];

  //收入表列描述信息
  // const columns = [
  //   {
  //     label: '来源',
  //     prop: 'source',
  //   },
  //   {
  //     label: '收入',
  //     prop: 'value',
  //     sortable: {
  //       sortDirections: ['ascend', 'descend'],
  //     },
  //   },
  //   {
  //     label: '占比',
  //     prop: 'answer',
  //     sortable: {
  //       sortDirections: ['ascend', 'descend'],
  //     },
  //   },
  // ];

  //收入表
  const revenue: any = [
    {
      id: 1,
      source: '互联网',
      value: 525,
      answer: '',
    },
    {
      id: 2,
      source: '实体门店',
      value: 305,
      answer: '',
    },
    {
      id: 3,
      source: '境外',
      value: 134,
      answer: '',
    },
    {
      id: 4,
      source: '其他',
      value: 60,
      answer: '',
    },
  ];

  interface User {
    source: string;
    value: number;
  }

  //计算总数
  const getTotal = revenue.reduce((a, b) => {
    return a + b.value;
  }, 0);

  //计算百分比
  function answerCount(value: number) {
    return Math.floor((value / getTotal) * 100) + '%';
  }
  const formatter = (row: User) => {
    return answerCount(row.value);
  };
</script>
<style lang="scss" scoped>
  // 右侧内容区域背景色
  .admin-layout-content-main {
    background: var(--el-bg-color);
  }
  // 处理栅格
  .el-row {
    padding-top: 6px;
    margin: -6px;
    .el-row {
      padding-top: 0;
    }
  }
  .el-col {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  // 卡片定制
  .custom-box-card {
    border: none;
  }
</style>
